<script>
import mapDom from "@/view/data/map.vue";
import charts1 from "@/view/data/charts1.vue";
import charts2 from "@/view/data/charts2.vue";
import charts3 from "@/view/data/charts3.vue";

export default {
    name: "countShow",
    components: {mapDom, charts1, charts2, charts3},
    data() {
        return {
            schoolData: {},
            school1Data: {},
            businessData: [],
            businessDetailed: {
                companyNum: 0, //企业数量
                carNum: 0, //车辆数量
                runNum: 0, //全年趟次
                studentNum: 0 //全年座次
            },
            districtCode: '',
            // treeData:[]
        }
    },
    mounted() {
        this.getSchoolData()
        this.getBusinessData();
        this.getPageBottomData();
        document.title = '护苗专线运行监测看板';
    },
    methods: {
        getSchoolData(districtCode = this.districtCode) {
            this.$HttpService.get(`/statistics/studentTransportScale?districtCode=${districtCode}`).then((res) => {
                this.schoolData = res;
            })
            this.$HttpService.get(`/statistics/schoolTransportScale?districtCode=${districtCode}`).then((res) => {
                this.school1Data = res;
            })
        },
        getBusinessData() {
            this.$HttpService.get(`/statistics/companyDimension`).then((res) => {
                this.businessData = res;
            })
        },
        translateNameToCode(name) {
            let ac = this.treeData.filter(x => {
                return x.districtName == name;
            })
            return ac[0]?.districtCode;
        },
        clickMap(name) {
            if (name === '全县') {
                this.districtCode = '';
                this.getPageBottomData()
                this.getSchoolData(this.districtCode);
                return;
            }
            let ac = this.businessData.filter(x => {
                return x.districtName === name;
            })[0]
            console.log(ac);
            this.districtCode = ac.districtCode;
            this.getPageBottomData()
            this.getSchoolData(this.districtCode);
        },
        showCharts2Data(count) {
            this.businessDetailed.runNum = count;
        },
        showCharts3Data(count) {
            this.businessDetailed.studentNum = count;
        },
        getPageBottomData(){
            let code = this.districtCode === ''?'510525000000':this.districtCode;
            this.$HttpService.get(`/statistics/dataStatistics/${code}`).then((res) => {
                this.businessDetailed.companyNum = res['护苗专线车企数量'];
                // this.businessDetailed.studentNum = res['护苗专线车全年座次'];
                // this.businessDetailed.runNum = res['护苗专线车全年趟次'];
                this.businessDetailed.carNum = res['护苗专线车辆数量'];
            })
        },
    }
}
</script>

<template>
    <div class="count-out">
        <div class="title mao">
            <div class="t1">护苗专线运行监测看板</div>
            <div class="t2">hu miao zhuan xian yun xin jian kong kan ban</div>
        </div>
        <div class="center">
            <div class="c-l">
                <div class="c-l-student mao">
                    <div class="ss">
                        <div class="s1 t1">覆盖学生群体</div>
                        <div class="s2 t2">覆盖率</div>
                    </div>
                    <div class="ss">
                        <div class="s1">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiao_xuesheng"></use>
                            </svg>
                            小学
                        </div>
                        <div class="s2">{{ Math.floor(schoolData['小学'] * 100) }}%</div>
                    </div>
                    <div class="ss">
                        <div class="s1">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-chuzhongsheng2"></use>
                            </svg>
                            初中
                        </div>
                        <div class="s2">{{ Math.floor(schoolData['初中'] * 100) }}%</div>
                    </div>
                    <!--          <div class="ss">-->
                    <!--            <div class="s1">-->
                    <!--              <svg class="icon" aria-hidden="true">-->
                    <!--                <use xlink:href="#icon-gaozhongsheng2"></use>-->
                    <!--              </svg>-->
                    <!--              高中-->
                    <!--            </div>-->
                    <!--            <div class="s2">{{ schoolData['高中'].toFixed(2) * 100 }}%</div>-->
                    <!--          </div>-->
                </div>
                <div class="c-l-student mao">
                    <div class="ss">
                        <div class="s1 t1">覆盖学校等级</div>
                        <div class="s2 t2">覆盖率</div>
                    </div>
                    <div class="ss">
                        <div class="s1">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiao_xuesheng"></use>
                            </svg>
                            小学
                        </div>
                        <div class="s2">{{ Math.floor(school1Data['小学'] * 100) }}%</div>
                    </div>
                    <div class="ss">
                        <div class="s1">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-chuzhongsheng2"></use>
                            </svg>
                            初中
                        </div>
                        <div class="s2">{{ Math.floor(school1Data['初中'] * 100) }}%</div>
                    </div>
                    <!--          <div class="ss">-->
                    <!--            <div class="s1">-->
                    <!--              <svg class="icon" aria-hidden="true">-->
                    <!--                <use xlink:href="#icon-gaozhongsheng2"></use>-->
                    <!--              </svg>-->
                    <!--              高中-->
                    <!--            </div>-->
                    <!--            <div class="s2">{{ school1Data['高中'].toFixed(2) * 100 }}%</div>-->
                    <!--          </div>-->
                </div>
                <div class="c-l-school mao">
                    <charts1 :districtCode="districtCode"></charts1>
                </div>
            </div>
            <div class="c-c">
                <mapDom @activeMap="clickMap"></mapDom>
            </div>
            <div class="c-r">
                <div class="tit2 mao">运输企业全年趟次排名</div>
                <div class="c-r-one mao">
                    <charts2 :districtCode="districtCode" @showCharts2Data="showCharts2Data"></charts2>
                </div>
                <div class="tit2 mao">运输企业全年坐次次排名</div>
                <div class="c-r-one mao">
                    <charts3 :districtCode="districtCode" @showCharts3Data="showCharts3Data"></charts3>
                </div>
            </div>
        </div>
        <div class="bot-item mao">
            <div class="it">
                <div class="it-l">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yunshuqiye"></use>
                    </svg>
                </div>
                <div class="it-r">
                    <div class="i2">{{ businessDetailed['companyNum'] }}</div>
                    <div class="i1">护苗专线车企数量</div>
                </div>
            </div>
            <div class="it">
                <div class="it-l">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mti-mianbaoche"></use>
                    </svg>
                </div>
                <div class="it-r">
                    <div class="i2">{{ businessDetailed['carNum'] }}</div>
                    <div class="i1">护苗专线车辆数量</div>
                </div>
            </div>
            <div class="it">
                <div class="it-l">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yunshutangci"></use>
                    </svg>
                </div>
                <div class="it-r">
                    <div class="i2">{{ businessDetailed['runNum'] }}</div>
                    <div class="i1">护苗专线全年趟次</div>
                </div>
            </div>
            <div class="it">
                <div class="it-l">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cheliangyunshu_cheliangfenshizairenchaxun"></use>
                    </svg>
                </div>
                <div class="it-r">
                    <div class="i2">{{ businessDetailed['studentNum'] }}</div>
                    <div class="i1">护苗专线全年坐次</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.title {
    width: 40%;
    height: 60px;
    position: relative;
    top: -20px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    text-align: center;
    margin: 0 auto;

    .t1 {
        font-size: 20px;
        padding-top: 5px;
        font-weight: bold;
        letter-spacing: 4px;
    }

    .t2 {
        color: #2c3e50;
    }
}

.mao {
    background-color: rgba(51, 51, 51, 0.1); /* 半透明背景 */
    backdrop-filter: blur(5px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
    opacity: 0.8;
}

.count-out {
    width: 100% !important;
    height: 95% !important;
    background-image: url("../../assets/images/bibi.png");
    background-size: 100% auto;
    padding: 20px;
    position: relative;
    border-radius: 10px;

    .center {
        display: flex;
        justify-content: space-between;

        .c-l {
            width: 400px;
            min-height: 600px;

            .c-l-student {
                width: calc(100% - 20px);
                height: 120px;
                padding: 20px 10px;
                margin-bottom: 20px;

                .ss {
                    font-size: 18px;
                    display: flex;
                    padding-bottom: 10px;

                    .t1, .t2 {
                        font-weight: bold;
                    }

                    .s1, .s2 {
                        width: 50%;
                        text-align: center;
                        color: #2c3e50;
                    }

                    .s2 {
                        color: #FF5D00 !important;
                    }

                    .s1 {
                        .icon {
                            width: 20px;
                            height: 20px;
                            position: relative;
                            top: 3px;
                        }
                    }
                }
            }

            .c-l-school {
                margin-top: 20px;
                width: 100%;
                min-height: 120px;
            }
        }

        .c-r {
            float: right;
            margin-right: 40px;
            width: 400px;
            min-height: 600px;

            .c-r-one {
                width: 100%;
                margin-bottom: 20px;
            }

            .tit2 {
                margin-bottom: 8px;
                padding-left: 10px;
                font-weight: bold;
                font-size: 12px;
                width: 200px;
                height: 30px;
                line-height: 30px;
            }
        }
    }

    .bot-item {
        width: 60%;
        height: 80px;
        position: absolute;
        bottom: 0px;
        right: 80px;
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;
        padding: 0 50px;
        display: flex;
        justify-content: center;

        .it {
            width: 188px;
            height: 60px;
            display: flex;
            margin: 0 30px;

            .it-l {
                display: flex;
                justify-items: center;
                align-items: center;

                .icon {
                    width: 60px;
                    height: 60px;
                    position: relative;
                    top: 10px;
                }
            }

            .it-r {
                padding-left: 10px;

                .i1 {
                    font-size: 14px;
                }

                .i2 {
                    text-align: left;
                    font-weight: bold;
                    color: #FF7700;
                    font-size: 36px;
                }
            }
        }
    }
}

</style>